<template>
  <el-dialog v-bind="$attrs" width="1000px" :title="dialogForm.id ? '修改认证从业机构' : '新增认证从业机构'" fullscreen center>
    <el-form ref="dialogFormRef" :model="dialogForm" :rules="rules" label-width="auto" :disabled="isDetail">
      <el-form-item label="机构批准号" prop="institutionalApprovalNumber">
        <el-input v-model="dialogForm.institutionalApprovalNumber" />
      </el-form-item>
      <el-form-item label="机构名称" prop="institutionName">
        <el-input v-model="dialogForm.institutionName" />
      </el-form-item>
      <el-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode">
        <el-input v-model="dialogForm.unifiedSocialCreditCode" />
      </el-form-item>
      <el-form-item label="所在行政区划" prop="areaCode">
        <!-- <el-input v-model="dialogForm.areaName" /> -->
        <el-select v-model="dialogForm.areaCode">
          <el-option v-for="item in cityList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机构地址" prop="institutionAddress">
        <el-input v-model="dialogForm.institutionAddress" />
      </el-form-item>
      <el-form-item label="机构类别" prop="institutionType">
        <el-input v-model="dialogForm.institutionType" />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input v-model="dialogForm.contacts" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactNumber">
        <el-input v-model="dialogForm.contactNumber" />
      </el-form-item>
      <el-form-item label="法人类型" prop="legalEntityType">
        <el-input v-model="dialogForm.legalEntityType" />
      </el-form-item>
      <el-form-item label="认证业务范围" prop="scopeCertificationBusiness">
        <el-input v-model="dialogForm.scopeCertificationBusiness" />
      </el-form-item>
      <el-form-item label="CNAS认可号" prop="cnasNumber">
        <el-input v-model="dialogForm.cnasNumber" />
      </el-form-item>
      <el-form-item label="是否外资" prop="isForeignInvestment">
        <el-radio-group v-model="dialogForm.isForeignInvestment">
          <el-radio value="1">是</el-radio>
          <el-radio value="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="onclose()">取消</el-button>
        <el-button type="primary" @click="submit(true)" v-if="!isDetail">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { defineComponent, reactive, ref, toRefs, watch, computed } from "vue";
import Editor from "@/components/Editor/index.vue";
import FileUpload from "@/components/FileUpload/index.vue";
import { cityList } from "@/utils/enum";
import {
  addQualityMapInfo,
  getQualityMapInfoByAdmin,
  modifyQualityMapInfo,
} from "@/api/api";
export default defineComponent({
  components: { Editor, FileUpload },
  props: {
    dataForm: Object,
    isDetail: {
      type: Boolean,
      default: false,
    },
    dataType: {
      type: [String, Number],
      default: "",
    },
    dataContext: {
      type: [String, Number],
      default: "",
    },
  },
  setup(props, { emit }) {
    const dialogFormRef = ref();
    const dataMap = reactive({
      dialogForm: {},
      rules: {
        institutionalApprovalNumber: [
          { required: true, message: "请输入机构批准号", trigger: "blur" },
        ],
        institutionName: [
          { required: true, message: "请输入机构名称", trigger: "blur" },
        ],
        unifiedSocialCreditCode: [
          {
            required: true,
            message: "请输入统一社会信用代码",
            trigger: "blur",
          },
        ],
        areaCode: [
          { required: true, message: "请输入所在行政区划", trigger: "blur" },
        ],
        institutionAddress: [
          { required: true, message: "请输入机构地址", trigger: "blur" },
        ],
        institutionType: [
          { required: true, message: "请输入机构类别", trigger: "blur" },
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        contactNumber: [
          { required: true, message: "请输入电话", trigger: "blur" },
        ],
        legalEntityType: [
          { required: true, message: "请输入法人类型", trigger: "blur" },
        ],
        scopeCertificationBusiness: [
          { required: true, message: "请输入认证业务范围", trigger: "blur" },
        ],
        cnasNumber: [
          { required: true, message: "请输入CNAS认可号", trigger: "blur" },
        ],
        isForeignInvestment: [
          { required: true, message: "请选择是否外资", trigger: "change" },
        ],
      },
      cityList: cityList,
    });
    const methodsMap = reactive({
      onclose() {
        emit("close");
      },
      submit(flag) {
        console.log(dataMap.dialogForm);
        dialogFormRef.value.validate((valid) => {
          if (valid) {
            let params = {
              ...dataMap.dialogForm,
              dataType: props.dataType,
              dataContext: props.dataContext,
            };
            if (params.areaCode){
              params.areaName=dataMap.cityList.find(item=>item.value==params.areaCode).label
            }
            if (dataMap.dialogForm.id) {
              modifyQualityMapInfo(params).then((res) => {
                console.log("修改成功", Date.now());
                setTimeout(() => {
                  emit("getDatas");
                  emit("close");
                }, 500);
              });
            } else {
              addQualityMapInfo(params).then((res) => {
                console.log("新增成功", Date.now());
                setTimeout(() => {
                  emit("getDatas");
                  emit("close");
                }, 500);
              });
            }
          } else {
            return false;
          }
        });
      },
    });
    onMounted(() => {
      let defaultData = {};
      if (props.dataForm) {
        let temp = JSON.parse(JSON.stringify(props.dataForm));
        if (temp.label) {
          temp.label = temp.label.split(";");
        }
        if (temp.exerciseStartTime && temp.exerciseEndTime) {
          temp.exerciseTime = [temp.exerciseStartTime, temp.exerciseEndTime];
        }
        dataMap.dialogForm = {
          ...defaultData,
          ...temp,
        };
      } else {
        dataMap.dialogForm = {
          ...defaultData,
        };
      }
    });
    return {
      ...toRefs(dataMap),
      ...toRefs(methodsMap),
      dialogFormRef,
    };
  },
});
</script>
